<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>phonegap_device_network_notification01</title>
<link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
<script src="../jquery.js" type="text/javascript"></script>
<script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script>
<script src="../cordova.js" type="text/javascript"></script>
<style>
#main{
	height:300px;
	position:relative;
} 
#compassDiv{
	position:absolute;
	top:30px;
}
#northDiv{
	position:absolute;
	top:116px;
 	left:142px;
	z-index:2;
	-webkit-transform:rotate(60deg);
}
</style>
<script type="text/javascript" charset="utf-8">

    // 等待Cordova加载
    document.addEventListener("deviceready", onDeviceReady, false);
	var watchID='';
    // Cordova加载完成
    function onDeviceReady() {
    	
		var options = { frequency: 300 };
    	watchID = navigator.compass.watchHeading(onSuccess, onError, options);    		
    	 
    }
    function onSuccess(heading){
    	var element = document.getElementById('northDiv');
    	var now_heading=heading.magneticHeading;
    	element.style.webkitTransform = 'rotate('+now_heading+"deg)";
    	$('#heading').text("当前的朝向"+now_heading);
    	    	
    	
    }
    function onError(compassError) {
        alert('Compass Error: ' + compassError.code);
    } 
  
 </script>

</head> 
<body>
<div data-role="page">
		<div data-role="header">
			<h1>PhoneGap100实战</h1>
		</div>
		<div data-role="content">
			<div id='main'>
			  <div id="northDiv"><img src="../images/antique_needle.png"/></div>	
			  <div id="compassDiv"><img src="../images/antique_compass.png" width="300" height="300" /></div>		  
			</div>  
		</div>		
		<div data-role="footer">
			<div id="heading">正在获取朝向...</div>			
		</div>
</div>

</body>
</html>
